/**
* @author: LiYaHui
* @date: 2021-11-05
* @description: 视频组件
*/
<template>
  <div class="video-wrap">
    <div v-if="isPlay" class="video-icon">
      <i v-if="src" @click="handleClickPlay"></i>
    </div>
    <video
      ref="video"
      class="video"
      :src="src"
      @ended="onEnded"
    ></video>
  </div>
</template>

<script>
export default {
  name: 'VideoDisc',
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      isPlay: true
    }
  },
  methods: {
    /**
       * 点击开始播放
       */
    handleClickPlay () {
      this.isPlay = false
      this.$refs.video.play()
    },
    /**
       * 播放停止
       * @param data
       */
    onEnded (data) {
      this.isPlay = true
    }
  }
}
</script>

<style lang="less" scoped>
.video-wrap {
  position: relative;
  z-index: 10;

  .video-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 11;

    i {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 12;
      width: 0.5rem;
      height: 0.5rem;
      transform: translate(-50%,-50%);
      background: url("../../../../assets/images/play.png") no-repeat center/100% 100%;
      cursor: pointer;
    }
  }

  .video {
    width: 100%;
    height: 100%;
  }
}
</style>
